<template>
    <div id="goods-list">   
    <!-- 轮播图 -->
    <div class="wrap">
        <div class="wrap-img banners-box">
            <img src="@/assets/img/lunb1.jpeg" alt="">
            <img src="@/assets/img/lunbo2.jpeg" alt="">
            <img src="@/assets/img/lunbo3.jpeg" alt="">
            <img src="@/assets/img/lunb1.jpeg" alt="">
        </div>
        <img style="visibility: hidden;" src="@/assets/img/lunb1.jpeg" alt="">

        <div class="num-box">
            <span class="num">1</span>
            <span class="num">2</span>
            <span class="num">3</span>
        </div>
        
    </div>
    <!-- 产品分类列表 -->
    <div class="center">
        <ul class="type-list list w100p bg-fff flex fww">
            <li class="item flex fdc jc-c aic">
                <img src="http://static.huruqing.cn/fresh/r1.png" alt="">
                <span>时令鲜果</span>
            </li>
            <li class="item flex fdc jc-c aic">
                <img src="http://static.huruqing.cn/fresh/r1.png" alt="">
                <span>时令鲜果</span>
            </li>
            <li class="item flex fdc jc-c aic">
                <img src="http://static.huruqing.cn/fresh/r1.png" alt="">
                <span>时令鲜果</span>
            </li>
            <li class="item flex fdc jc-c aic">
                <img src="http://static.huruqing.cn/fresh/r1.png" alt="">
                <span>时令鲜果</span>
            </li>
            <li class="item flex fdc jc-c aic">
                <img src="http://static.huruqing.cn/fresh/r1.png" alt="">
                <span>时令鲜果</span>
            </li>
            <li class="item flex fdc jc-c aic">
                <img src="http://static.huruqing.cn/fresh/r1.png" alt="">
                <span>时令鲜果</span>
            </li>
            <li class="item flex fdc jc-c aic">
                <img src="http://static.huruqing.cn/fresh/r1.png" alt="">
                <span>时令鲜果</span>
            </li>
            <li class="item flex fdc jc-c aic">
                <img src="http://static.huruqing.cn/fresh/r1.png" alt="">
                <span>时令鲜果</span>
            </li>
        </ul>
    </div>
    <!-- 秒杀 拼团 超值福利 -->
    <div class="baaner w100p bg-fff flex fdc jc-sb">
        <div class="main mt-10 flex">
            <div class="text ml-5 mr-5 flex jc-sb aic rel pl-15 pr-15">
                <p class="p1 fff abs f10 bg-base">秒杀</p>
                <div class="t1">
                    <p>秒杀</p>
                    <p class="f12">超值惊喜</p>
                    <button class="fff bg-base">立即砍价</button>
                </div>
                <img src="@/assets/img/t1.png" alt="">
            </div>
            <div class="text ml-5 mr-5 flex jc-sb aic rel pl-15 pr-15">
                <p class="p1 fff abs f10 bg-base">拼团</p>
                <div class="t1">
                    <p>拼团</p>
                    <p class="f12">限时拼团</p>
                    <button class="fff bg-base">一键拼团</button>
                </div>
                <img src="@/assets/img/t2.png" alt="">
            </div>
        </div>
        <!-- 超级福利 -->
        <div class="side flex jc-sb aic ml-10 mr-10 mt-10 bg-base fff">
            <p class="pl-5">
                <i class="iconfont icon-coupon"></i>
                <span>超值福利 | 全场满减</span>
            </p>
            <p class="pr-5">
                <span>立即领取</span>
                <i class="iconfont icon-iconfontyoujiantou-copy-copy-copy-copy"></i>
            </p>
        </div>
    </div>
    <!-- 产品展示列表 -->
    <div class="content bg-fff w100p">
        <div class="title1 pt-5 flex jc-sa aic bg-fff">
            <p>推荐</p>
            <p class="flex aic">
                <span>销量</span>
                <span class="flex fdc">
                    <i class="iconfont icon-xiajiantou-copy f10"></i>
                    <i class="iconfont icon-xiajiantou f10"></i>
                </span>
            </p>
            <p class="flex aic">
                <span>价格</span>
                <span class="flex fdc">
                    <i class="iconfont icon-xiajiantou-copy f10"></i>
                    <i class="iconfont icon-xiajiantou f10"></i>
                </span>
            </p>
        </div>
        <div class="title2 w100p">
            <ul class="list flex fww pt-10" id="goods-list">
                <li class="item fg1 mb-15 flex fdc jc-sb aic">
                    <img alt="" class="img" data-src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png?x-oss-process=image/resize,w_180" src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png?x-oss-process=image/resize,w_180" lazy="loaded">
                    <div class="goodsinfo-box w100p pl-5 pr-5 flex fdc jc-sa">
                        <p class="info">【山东】金秋红蜜桃</p>
                        <p class="info f10">基地果园现摘现发 鲜甜红润..</p>
                        <p class="p1 flex jc-sb">
                            <span class="base">&yen;34.2</span>
                            <span class="s1 f12">销量9998</span>
                        </p>
                    </div>
                </li>
                <li class="item fg1 mb-15 flex fdc jc-sb aic">
                    <img alt="" class="img" data-src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png?x-oss-process=image/resize,w_180" src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png?x-oss-process=image/resize,w_180" lazy="loaded">
                    <div class="goodsinfo-box w100p pl-5 pr-5 flex fdc jc-sa">
                        <p class="info">【山东】金秋红蜜桃</p>
                        <p class="info f10">基地果园现摘现发 鲜甜红润..</p>
                        <p class="p1 flex jc-sb">
                            <span class="base">&yen;34.2</span>
                            <span class="s1 f12">销量9998</span>
                        </p>
                    </div>
                </li>
                <li class="item fg1 mb-15 flex fdc jc-sb aic">
                    <img alt="" class="img" data-src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png?x-oss-process=image/resize,w_180" src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png?x-oss-process=image/resize,w_180" lazy="loaded">
                    <div class="goodsinfo-box w100p pl-5 pr-5 flex fdc jc-sa">
                        <p class="info">【山东】金秋红蜜桃</p>
                        <p class="info f10">基地果园现摘现发 鲜甜红润..</p>
                        <p class="p1 flex jc-sb">
                            <span class="base">&yen;34.2</span>
                            <span class="s1 f12">销量9998</span>
                        </p>
                    </div>
                </li>
                <li class="item fg1 mb-15 flex fdc jc-sb aic">
                    <img alt="" class="img" data-src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png?x-oss-process=image/resize,w_180" src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png?x-oss-process=image/resize,w_180" lazy="loaded">
                    <div class="goodsinfo-box w100p pl-5 pr-5 flex fdc jc-sa">
                        <p class="info">【山东】金秋红蜜桃</p>
                        <p class="info f10">基地果园现摘现发 鲜甜红润..</p>
                        <p class="p1 flex jc-sb">
                            <span class="base">&yen;34.2</span>
                            <span class="s1 f12">销量9998</span>
                        </p>
                    </div>
                </li>
                <li class="item fg1 mb-15 flex fdc jc-sb aic blank"></li>
            </ul>
        </div>
    </div>

        <!-- 底部栏 -->
        <Footer/>
    </div>
</template>

<script>
//底部栏
import Footer from '@/components/Footer.vue';
export default {
  components:{
    Footer,
  }
}
</script>

<style lang="less">
@import './goodsList.less';
</style>